<template>
  <el-dialog
    v-model="isShow"
    :title="title"
    width="80%"
    :close-on-click-modal="false"
    @close="handleClose"
  >
  <div class="mb-4">
    <el-button type="primary" icon="plus" @click="handleOperate(refAddEdit,row,'add')">新增</el-button>
  </div>  
    <search-form ref="refSearchForm" @confirm="handleSearch" />
    <el-table
          v-loading="tableData.loading"
          ref="refTable"
          :data="tableData.list"
          stripe
          border
          style="width: 100%"
          row-key="id"
          :header-cell-style="tableData.headerCellStyle"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          @selection-change="selectCheckbox"
          >
          <el-table-column type="selection" width="55" align="center" fixed />
          <el-table-column label="ID" prop="guildId" width="180"/>
          <el-table-column label="分会名称" prop="guildName" />
          <el-table-column label="会长ID" prop="leaderId" width="180"/>
          <el-table-column label="会长姓名" prop="leaderName"/>
          <el-table-column label="会长昵称" prop="appUserListVo.nickname"/>
          <el-table-column label="会长电话" prop="leaderPhone"/>
          <el-table-column label="描述" prop="description" show-overflow-tooltip/>
          <!-- <el-table-column label="状态" prop="status">
            <template #default="scope">
              <el-tag size="small">{{proxy.$util.selectName(scope.row.status, optionData.baseType)}}</el-tag>
            </template>
          </el-table-column> -->
          <el-table-column label="操作" fixed="right" width="200" align="center">
            <template #default="scope">
              <el-button
                size="small"
                type="primary"
                text
                @click="handleOperate(refAddEdit,scope.row,'edit')"
              >编辑</el-button>
              <el-button
                size="small"
                type="primary"
                text
                @click="handleOperate(refChangeLeader,scope.row)"
              >跟换分会长</el-button>
              <el-button
                size="small"
                type="primary"
                text
                @click="handleOperate(refMemberList,scope.row)"
              >查看会员</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="pageData.current"
          :page-size="pageData.size"
          :page-sizes="pageData.pageSizes"
          :total="pageData.total"
          background
          style="padding: 30px 0; text-align: center;"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="getList"
          @size-change="sizeChange"
        />
        <add-edit ref="refAddEdit" name="分会" @confirm="getList(dlgAddEdit.type == 'add'? 1 : pageData.current)"></add-edit> 
        <member-list ref="refMemberList" />
        <!-- <my-select ref="refMySelect" @confirm="changeLeader"/> -->
         <change-leader ref="refChangeLeader" @confirm="getList(pageData.current)" />
      </el-dialog>
</template>

<script setup lang="ts">
// import {onMounted, ref, reactive, provide,defineAsyncComponent, getCurrentInstance, ComponentInternalInstance} from 'vue';
let obj = {
  pageApi: '/admin/guilds/page',
  deleteApi: '/admin/guilds',
  primaryKey: 'guildId',
  searchFixed:{},
}
import { useList } from '/@/assets/compositionFn/list';
let { dlgAddEdit, tableData, pageData, optionDataStore, getList, handleSearch, sizeChange, selectCheckbox, setDefaultCheckbox, handleOperate, handleDelete, handleDeleteMultiple, handleExport } = useList(obj);
const AddEdit = defineAsyncComponent(() => import('./components/AddEdit.vue'));
const SearchForm = defineAsyncComponent(() => import('./components/SearchForm.vue'));
const MemberList = defineAsyncComponent(() => import('../member/index.vue'));
const MySelect = defineAsyncComponent(() => import('/@/views/pages/guilds/components/MySelect.vue'));
const ChangeLeader = defineAsyncComponent(() => import('/@/views/pages/guilds/components/ChangeLeader.vue'));
const {proxy} :any = getCurrentInstance() as ComponentInternalInstance;
const refSearchForm = ref();
const refTable = ref();
const refAddEdit = ref();
const refMemberList = ref();
const refMySelect = ref();
const refChangeLeader = ref();
const optionData:any = reactive({});
const emit = defineEmits(['confirm']);
let isShow = ref(false);
let title = ref('所属分会');
let row:any = reactive({});
let selectGuild = ref();

const init = (data:any) => {
  row = data;
  isShow.value = true;
  obj.searchFixed.pid = row.guildId;
  getList();
};
const handleClose = () => {
  
}
const handleChange = (row) => {
  selectGuild.value = row;
  handleOperate(refMySelect.value)
};
// const changeLeader = (obj) => {
//   let params = {
//     guildId: selectGuild.value.guildId,
//     leaderId: obj.userId,
//   }
//   proxy.$request('put', '/admin/guilds/updateGuildsLeader', params, (data,msg) => {
//     getList(pageData.current);
//   })
// }
defineExpose({
  init,
})
</script>

<style>

</style>